<template>
  <div>
    <el-card style="margin:20px 0px"><Menus @setAttributeData='setAttributeData' :Operations='AttributeDispaly'/></el-card>
    <el-card>
      <div v-show="AttributeDispaly">
        <el-button type="primary" icon="el-icon-edit" :disabled='AttributeData.length < 1' @click="addDatas">添加属性</el-button>
      <el-table :data="AttributeData" border style="margin-top:20px">
        <!-- 宽度不写就会百分比最大 -->
        <el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
        <el-table-column label="属性的名称" width="200" prop="attrName"></el-table-column>
        <el-table-column label="属性值列表" width="700">
          <template slot-scope="{row,$index}">
            <el-tag type="success" v-for="data in row.attrValueList" :key="data.id" style="margin-right:10px">{{data.valueName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width='80'>
          <template slot-scope="{row,$index}">
            <el-button type="danger" size="small" @click="recompose(row)" >修改</el-button>
            <el-button type="warning" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div v-show="!AttributeDispaly">
        <el-form :model="form">
        <el-form-item label="属性名">
          <el-input style="width:500px" v-model="form.attrName" placeholder="请输入属性名"></el-input>
        </el-form-item>
        <el-button type="danger" size="small" icon="el-icon-edit" @click="pushList" :disabled='form.attrName.length < 1'>添加属性值</el-button>
        <el-button size="small" type="info">取消</el-button>
        <el-table border style="margin:20px 0px" :data="this.form.attrValueList">
          <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
          <el-table-column label="属性值名称" prop="valueName">
            <template slot-scope="{row,$index}"> 
            <el-input v-model="form.attrValueList[$index].valueName" placeholder="请输入值" v-show="row.flag"  @blur="hiddenList(row)" :ref='$index'></el-input> 
            <span v-show="!row.flag" @click="haveInput(row,$index)" style="display:block;width:100%;">{{row.valueName}}</span>
            </template> 
          </el-table-column >
          <el-table-column label="操作">
            <template slot-scope="{row,$index}">
            <el-popconfirm
            :title="`确定要删除吗`" @onConfirm="delData(row)">
            <el-button slot="reference" type="warning" size="small">删除</el-button>
            </el-popconfirm>
          </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" size="small" @click="upListData" :disabled='form.attrValueList.length < 1'>保存</el-button>
        <el-button type="info" size="small" @click="AttributeDispaly = true">取消</el-button>
      </el-form>
</div> 
    </el-card>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
    name:'Attrs',
    data(){
      return{
        AttributeData:[],
        AttributeDispaly:true,
        isModify:false,
        backUpData:'',
        form:{
          attrName:'',
          attrValueList:[],
          categoryId: '', 
          categoryLevel: 3, 
        }
      }
    },
    methods:{
      async setAttributeData(data=''){
        this.AttributeData = []
        if(data){
          this.backUpData = data;
          const {oneRegion,twoRegion,threeRegion} = data
          const ready = await this.$API.attr.reqManage(oneRegion,twoRegion,threeRegion)
          if(ready.code == 200){
          this.AttributeData = ready.data
          this.form.categoryId = threeRegion
        }
        }
      },
      async upListData(){
        const rest = this.form.attrValueList.filter(name =>{
          if(name.valueName !== ''){
            delete name.flag
            return 
          }else{
            delete this.form.attrValueList.name
          }
        })
        try {
          const result = await this.$API.attr.reqSaveAttrInfo(rest)
          await this.setAttributeData(this.backUpData)
          if(result.code == 200){
          this.$message.success('保存成功')
          this.AttributeDispaly = true
          }else{
          this.$message.error('失败了请重试,理由是: '+result.data)
        }
        } catch (error) {
          this.$message.error('失败了请重试,理由是'+error)
        }
      },
      delData(row){
          const result = this.form.attrValueList.filter(name => name !== row)
          this.form.attrValueList = result
      },
      pushList(){
        this.form.attrValueList.unshift({
              attrID:this.form.categoryId,
              valueName:'',
              flag:true
        })
        this.$nextTick(function(){
          this.$refs[0].focus()
        })
      },
      addDatas(){
        this.form = {
          attrName:'',
          attrValueList:[],
          categoryId: 0, 
          categoryLevel: 3, 
        }
        this.AttributeDispaly = false
      },
      recompose(value){
        let cloone = cloneDeep(value)
        if(cloone.attrValueList.length > 0){
          cloone.attrValueList.forEach(element => {
            element.flag = false
          });
        }
        console.log(cloone)
        this.form = cloone
        this.AttributeDispaly = false
      },
      haveInput(row,index){
        row.flag = true
        this.$nextTick(function(){
          this.$refs[index].focus()
        })
      },
      hiddenList(row){
        if(row.valueName.trim().length > 0){
          let key = 0;
          this.form.attrValueList.map(name=>{
            if(row.valueName == name.valueName){
            key ++;
          }
        })
        if(key > 1){
          this.$message.warning('请勿重复输入')
          return
        }
          row.flag = false
          console.log('函数正常关闭')
          return
        }
        alert(`输入框拒绝违规字符"${row.valueName}"的输入`)
      }
      
    }
}
</script>

<style>

</style>